<template>
    <div class="exam-approval-container">
      <!-- 考试信息卡片 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>考试信息</h3>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="考试名称">2023年通关期中考试</el-descriptions-item>
          <el-descriptions-item label="考试时间">2023-05-22 14:00:00-16:00:00</el-descriptions-item>
          <el-descriptions-item label="参加限制">考试开始15分钟</el-descriptions-item>
          <el-descriptions-item label="答题时间">120分钟</el-descriptions-item>
          <el-descriptions-item label="交卷限制">考试结束之前15分钟</el-descriptions-item>
          <el-descriptions-item label="考试说明">常规考试</el-descriptions-item>
          <el-descriptions-item label="考试提醒">开启</el-descriptions-item>
          <el-descriptions-item label="提醒时间">15分钟</el-descriptions-item>
          <el-descriptions-item label="考生须知" :span="2">服从考试安排</el-descriptions-item>
        </el-descriptions>
      </el-card>
  
      <!-- 试卷信息卡片 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>考试信息</h3>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="选择试卷">语文试卷</el-descriptions-item>
          <el-descriptions-item label="试卷难度">中等</el-descriptions-item>
          <el-descriptions-item label="试题排序">固定排序</el-descriptions-item>
          <el-descriptions-item label="选项排序">固定排序</el-descriptions-item>
          <el-descriptions-item label="合格分数">60分</el-descriptions-item>
        </el-descriptions>
      </el-card>
  
      <!-- 考生信息表格 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>考生信息</h3>
        </div>
        <el-table :data="studentData" border style="width: 100%">
          <el-table-column prop="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="idCard" label="证件" width="200"></el-table-column>
          <el-table-column prop="gender" label="性别" width="80"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
        </el-table>
      </el-card>
  
      <!-- 审批流转记录 -->
      <el-card class="info-card">
        <div class="card-header">
          <h3>审批流转记录</h3>
        </div>
        <div class="approval-flow">
          <div class="flow-date">05-22</div>
          
          <div class="flow-item">
            <div class="flow-approver">二级审批人：孙老师</div>
            <div class="flow-time">2023-05-22 09:22</div>
            <div class="flow-result">
              <el-tag type="success" size="small">审批结果：通过</el-tag>
            </div>
            <div class="flow-comment">审核意见：本次考试符合教学实际，予以通过。</div>
          </div>
  
          <div class="flow-item">
            <div class="flow-approver">二级审批人：孙老师</div>
            <div class="flow-time">2023-05-22 09:22</div>
            <div class="flow-result">
              <el-tag type="success" size="small">审批结果：通过</el-tag>
            </div>
            <div class="flow-comment">审核意见：本次考试符合教学实际，予以通过。</div>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        studentData: [
          {
            index: 1,
            name: '张三',
            idCard: '6782488762368768222',
            gender: '男',
            phone: '12285889999'
          }
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .exam-approval-container {
    padding: 20px;
  }
  
  .info-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
  }
  
  .el-descriptions {
    margin-top: 15px;
  }
  
  .el-table {
    margin-top: 15px;
  }
  
  /* 审批流转记录样式 */
  .approval-flow {
    padding: 10px;
  }
  
  .flow-date {
    font-weight: bold;
    margin: 15px 0 10px 0;
    color: #333;
    font-size: 15px;
  }
  
  .flow-item {
    padding: 12px;
    margin-bottom: 15px;
    border-left: 3px solid #409EFF;
    background-color: #f8fafc;
  }
  
  .flow-approver {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .flow-time {
    color: #909399;
    font-size: 12px;
    margin-bottom: 8px;
  }
  
  .flow-result {
    margin-bottom: 8px;
  }
  
  .flow-comment {
    padding: 8px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
  }
  </style>